<template>
  <a-card :tab-list="tabListNoTitle" :active-tab-key="noTitleKey"
          @tabChange="key => onTabChange(key, 'noTitleKey')">
    <router-link slot="tabBarExtraContent" to>
      <a-button @click="$router.back(-1)">返回</a-button>
    </router-link>
    <div v-if="noTitleKey === '基本信息'">
      <forms></forms>
    </div>
    <div v-else-if="noTitleKey === '题目管理'">
      <titles></titles>
    </div>
    <p v-else-if="noTitleKey === '评估关系'">
      <relations></relations>
    </p>
    <p v-else-if="noTitleKey === '问卷分析'">
      <analyse></analyse>
    </p>
  </a-card>
</template>

<script>
import forms from './form'
import titles from './title'
import relations from './relations'
import analyse from './analyse'

export default {
  name: "basic",
  components: {
    forms,
    titles,
    relations,
    analyse
  },
  data() {
    return {
      noTitleKey: '基本信息',
      tabListNoTitle: [
        {
          key: '基本信息',
          tab: '基本信息',
        },
        {
          key: '题目管理',
          tab: '题目管理',
        },
        {
          key: '评估关系',
          tab: '评估关系',
        },
        {
          key: '问卷分析',
          tab: '问卷分析',
        },
      ],
    }
  },
  watch: {
    $route: {
      handler(to, from) {
        //深度监听，同时也可监听到param参数变化
        this.noTitleKey = to.query.titleKey
      },
      deep: true,
      // 代表在wacth里声明了这个方法之后立即先去执行handler方法
      immediate: true
    }
  },
  activated () {
    this.noTitleKey = this.$route.query.titleKey
  },
  methods: {
    onTabChange(key, type) {
      console.log(key, type);
      this[type] = key;
      let id = this.$route.query.questionId
      this.$router.replace({ name: 'questionnaire-basic', query: { questionId: id, titleKey: key } })
    },
  }
}
</script>

<style scoped>

</style>
